<template>
    <view class="">
        <view
            class="ctn-components"
            @tap="runPath(item)"
            v-for="item in currentData"
            :key="item.id"
        >
            <view class="title">
                <text class="title-name"> {{ item.name }} </text>
                <text class="title-class"> 灵活申赎 </text>
            </view>
            <view class="main">
                <view class="main-first">
                    <text class="first-mount">
                        <text class="mount-meta">
                            {{ item.sevenDaysYearIncome }}
                        </text>
                        %
                    </text>
                    <text class="explain">七日年化收益率</text>
                </view>
                <view class="main-second">
                    <text class="second-title">{{ item.payType }}</text>
                    <text class="explain">先到先得</text>
                </view>
                <view class="btn"> 立即购买 </view>
            </view>
            <view class="hr"></view>
            <view class="footer">
                本基金为货币市场基金，属于证券投资基金中的高流动性、低风险品种。
            </view>
        </view>
    </view>
</template>

<script>
	
export default {
	
    props: [`bottom`],
    data() {
        return {
            currentData: [],
            page: 0,
            tempData: [],
        };
    },
    created() {
        console.log(this.bottom);
        this.getData();
    },
	computed:{
		
	},
    methods: {
        runPath(item) {
			// console.log(this.$store);
			this.$store.commit('CHANGE_DATA',item)
			// console.log(item);
            uni.navigateTo({
                url: `../../pages/productDetail/productDetail`,
            });
        },
        onReachBottom() {
            // console.log(`触底了`);
        },

        async getData() {
            while (this.tempData.length < 10) {
                this.page++;
                /* 筛选出转态为2的所有数据，若没有则page++继续请求 */
                const res = await this.$api.current.getData({
                    page: this.page,
                });
                if (this.page > res.data.pages) {
                    //判断触底的事件
                    uni.showToast({
                        title: "暂时没有数据了",
                        duration: 2000,
                        icon: "error",
                    });
                    break;
                }
                // console.log(`res======`, res);
                if (res.code == 200) {
                    let data = res.data.list;
                    data = data.filter((item) => item.status == "1"); //筛选出状态为1的 上架产品
                    // console.log(`data======`, data);
                    if (data.length != 0) {
                        //如果筛选出来的不等于0 就将其加入到中间数组中 ，等于零继续++
                        this.tempData.push(...data);
                    } else if ((this.page = res.data.pages)) {
                        if (data.length > 0) {
                            this.tempData.push(...data);
                        }
                        break;
                    }
                }

                // console.log(this.tempData);
            }
            this.currentData.push(...this.tempData);
            this.tempData = [];

            // console.log(this.currentData, `已上架的活期`);
        },
    },
    watch: {
        bottom() {
            console.log(`变化了`);
            this.getData();
        },
    },
};
</script>

<style lang="scss" scoped>
$font-color: #999999;
$font-size: 24rpx;
$font-size-ctn: 28rpx;
$title-font-size: 48rpx;
$border-raduis: 10rpx;

@mixin border {
    border: 1px solid red;
}

@mixin border-shadow {
    box-shadow: 0 0 16rpx 0rpx rgba(0, 0, 0, 0.15);
}

@mixin flex-col {
    display: flex;
    flex-direction: column;
}

@mixin flex-row {
    display: flex;
    align-items: center;
}

.ctn-components {
    @include flex-col();
    // width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    // @include border();
    @include border-shadow();
    border-radius: $border-raduis;
    margin-bottom: 40rpx;
    // @include border();

    .title {
        @include flex-row();
        font-size: 28rpx;
        color: #333;
        // @include border();

        .title-class {
            @include flex-row();
            justify-content: center;
            font-size: 20rpx;
            color: #be7f22;
            background-color: #fcf5ec;
            border-radius: 4rpx;
            width: 100rpx;
            height: 34rpx;
            margin-left: 20rpx;
        }
    }

    .main {
        // @include border();
        @include flex-row();
        justify-content: space-between;
        margin-top: 40rpx;

        .main-first {
            @include flex-col();
            align-items: center;

            // height: 72rpx;
            .first-mount {
                // margin-top: 30rpx;
                // margin-bottom: 20rpx;
                font-size: 28rpx;
                color: #f85656;

                .mount-meta {
                    font-size: 44rpx;
                    font-weight: bold;
                }
            }

            .explain {
                font-size: 24rpx;
                color: #999;
                margin-top: 16rpx;
            }
        }

        .main-second {
            align-self: flex-end;
            @include flex-col();
            align-items: center;
            justify-content: space-between;

            .second-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .explain {
                font-size: 24rpx;
                color: #999;
                margin-top: 16rpx;
            }
        }

        .btn {
            @include flex-row();
            justify-content: center;
            width: 178rpx;
            height: 60rpx;
            background-color: #3476f1;
            font-size: 28rpx;
            color: #fff;
            border-radius: 12rpx;
        }
    }

    .hr {
        height: 2rpx;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.03);
        margin-top: 30rpx;
        margin-bottom: 30rpx;
    }

    .footer {
        font-size: 24rpx;
        color: #999;
        // margin-top: 60rpx;
    }
}
</style>
